<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <base href>

    <title>Narrow Jumbotron Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../css/editor.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="narrow-jumbotron.css" rel="stylesheet">

    <!-- Animate on scroll library -->
    <script src="../../libs/aos/aos.js"></script>
    <link href="../../libs/aos/aos.css" rel="stylesheet">
	<noscript>
        <style type="text/css">
            [data-aos] {
                opacity: 1 !important;
                transform: translate(0) scale(1) !important;
            }
        </style>
    </noscript>    
</head>
	
  <body>

   <header class="header clearfix" id="top-header" data-aos="zoom-in" data-aos-delay="100">
	<div class="container">
        <nav>
          <ul class="nav nav-pills float-end">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </nav>
        <h3 class="text-muted">Project name</h3>
        </div>
      </header>

      <section class="jumbotron p-4" id="jumbotron">
		<div class="container">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64" fill="#0d6efd" data-aos="fade-up" data-aos-delay="100" style="fill:var(--bs-blue)" class>
				<path d="M 30.335938 12.546875 L 20.164063 11.472656 L 16 2.132813 L 11.835938 11.472656 L 1.664063 12.546875 L 9.261719 19.394531 L 7.140625 29.398438 L 16 24.289063 L 24.859375 29.398438 L 22.738281 19.394531 Z"></path>
			</svg>

			<h1 data-aos="fade-up" data-aos-delay="200" class>Jumbotron heading !!!</h1>
			<p class="lead" data-aos="fade-up" data-aos-delay="300">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

			<img class="rounded mw-100 my-5" data-aos="fade-up" data-aos-delay="400" src="https://source.unsplash.com/9UVmlIb0wJU/500x500">
			<p><a class="btn btn-lg btn-primary" href="#" role="button" data-aos="fade-up" data-aos-delay="100">Sign up today</a></p>
		</div>
      </section>

      <section id="marketing">
		  <div class="container">
		  <div class="row marketing">
			<div class="col-lg-6" data-aos="fade-up" data-aos-delay="500" data-vvveb-disabled-area>
			  <h4>Subheading</h4>
			  <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

			  <h4>Subheading</h4>
			   <p data-vvveb-edit-exception>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

			  <h4>Subheading</h4>
			  <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			</div>

			<div class="col-lg-6" data-aos="fade-up" data-aos-delay="600">
			  <h4>Subheading</h4>
			  <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

			  <h4>Subheading</h4>
			  <p data-vvveb-disabled>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

			  <h4>Subheading</h4>
			  <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			</div>
		  </div>
		  </div>
      </section>

		<section id="video">
			<div class="container">
				<video width="320" height="240" playsinline loop muted controls src="../../media/sample.webm" poster="../../media/sample.webp"><video>
			</video></video></div>
		</section>	
			
		<section id="gallery">
			<div class="container">
				<div class="gallery masonry has-shadow" data-component-gallery>
					<div class="item">
						<a>
							<img src="../../media/7.jpg">
						</a>
					</div>
					<div class="item">
						<a>
							<img src="../../media/2.jpg">
						</a>
					</div>
					<div class="item">
						<a>
							<img src="../../media/15.jpg">
						</a>
					</div>
					<div class="item">
						<a>
							<img src="../../media/4.jpg">
						</a>
					</div>
					<div class="item">
						<a>
							<img src="../../media/5.jpg">
						</a>
					</div>
					<div class="item">
						<a>
							<img src="../../media/6.jpg">
						</a>
					</div>
					<div class="item">
						<a>
							<img src="../../media/7.jpg">
						</a>
					</div>
				</div>
			</div>
		</section>

      <footer class="footer" id="page-footer" data-aos="fade-up" data-aos-delay="700">
		<div class="container">
	        <p>© Company 2017</p>
        </div>
      </footer>

	<script>
		AOS.init();
	</script>


</body>
</html>
